<template>
    <el-form-item label="符号">
        <el-select v-model="localRuleOption.wellKnownName" placeholder="符号" size="small">
            <el-option label="圆形" value="circle"></el-option>
            <el-option label="三角形" value="triangle"></el-option>
            <el-option label="正方形" value="square"></el-option>
            <el-option label="星形" value="star"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="旋转角度°">
        <el-input-number
            v-model="localRuleOption.rotate"
            controls-position="right"
            :min="0"
            :max="360"
            :step="1"
            size="small"
        ></el-input-number>
    </el-form-item>
    <el-form-item label="大小">
        <el-input-number
            v-model="localRuleOption.radius"
            controls-position="right"
            :min="0"
            :max="30"
            :step="1"
            size="small"
        ></el-input-number>
    </el-form-item>
    <el-form-item label="填充颜色">
        <el-color-picker v-model="localRuleOption.color" size="small"></el-color-picker>
    </el-form-item>
    <el-form-item label="填充不透明度">
        <el-input-number
            v-model="localRuleOption.fillOpacity"
            controls-position="right"
            :min="0"
            :max="1"
            :step="0.01"
            size="small"
        ></el-input-number>
    </el-form-item>
    <el-form-item label="描边颜色">
        <el-color-picker v-model="localRuleOption.strokeColor" size="small"></el-color-picker>
    </el-form-item>
    <el-form-item label="描边宽度">
        <el-input-number
            v-model="localRuleOption.strokeWidth"
            controls-position="right"
            :min="0"
            :max="10"
            :step="1"
            size="small"
        ></el-input-number>
    </el-form-item>
    <el-form-item label="描边不透明度">
        <el-input-number
            v-model="localRuleOption.strokeOpacity"
            controls-position="right"
            :min="0"
            :max="1"
            :step="0.01"
            size="small"
        ></el-input-number>
    </el-form-item>
</template>
<script setup lang="ts">
import type { MarkSymbolizer } from 'geostyler-style';
import { onBeforeMount, toRef } from 'vue';
type MarkStyleProps = {
    geoSymbolizer: MarkSymbolizer
}
const props = withDefaults(defineProps<MarkStyleProps>(), {
    geoSymbolizer: () => {
        return {
            kind: 'Mark', // 规则类型
            wellKnownName: 'circle',
            rotate: 0,
            radius: 4,
            color: '#FF0000',
            fillOpacity: 1,
            strokeColor: '',
            strokeWidth: 0,
            strokeOpacity: 1,
        }
    },
})
// 线规则
const localRuleOption = toRef(props, 'geoSymbolizer')
onBeforeMount(() => {})
// 因为表单中是用v-model绑定的所以不用updateInnerStyle去更新
// interface updateInnerStyleEmit {
//     (e: 'updateInnerStyle', localRuleOption: GeoSymbolizer): void
// }
// const emit = defineEmits<updateInnerStyleEmit>()
// watch(
//     localRuleOption,
//     () => {
//         emit('updateInnerStyle', localRuleOption.value as GeoSymbolizer)
//     },
//     {
//         deep: true,
//     },
// )
</script>
<style lang="scss" scoped></style>
